<%@ include file="/view/template/header.jsp"%>	
	<div id="content">
	
    	<%@ include file="/view/profile/profile_common.jsp"%>
        		<div class="right-content">
			<div class="box">
			
						<h1><s:label key="label.profile.change_password" cssClass="label_text"></s:label></h1>
				<div class="sub_box">
				<div class="con-part" >
						<h3><c:if test="${param.message !=null }">
       					<%out.print(request.getParameter("message"));%>
   						</c:if></h3>
						</div>
				<form id="change_password_form" method="post">
				<div class="con-part"><span><s:label key="label.old_password" cssClass="label_text"></s:label>
				<img name="required" src="<% out.print(baseURL);%>/view/required.jpg" width="15" height="20" alt="required" />
				</span> 
				<input id="oldPassword" name="oldPassword" class="input_text" type="password"/>
				</div>
					<div class="con-part"><span><s:label key="label.new_password" cssClass="label_text"></s:label>
					<img name="required" src="<% out.print(baseURL);%>/view/required.jpg" width="15" height="20" alt="required" />
					</span> 
					<input id="newPassword" name="newPassword" class="input_text" type="password"/> 
						
						</div>
						<div class="con-part"><span><s:label key="label.confirmPassword" cssClass="label_text"></s:label> 
						<img name="required" src="<% out.print(baseURL);%>/view/required.jpg" width="15" height="20" alt="required" />
						</span>
						<input id="confirmPassword" name="confirmPassword" type="password" class="input_text"/>
						</div>
						
						<div class="con-part"><span>&nbsp;</span> <!-- <input type="submit"  value="Search" class="green"/> -->
						<s:submit key="label.change_password" cssClass="green" />  </div>
						
					
				</form>
				</div>
			</div>
		</div>
    </div>

	<%@ include file="/view/template/footer.jsp"%>
	
	<script>
	$(document).ready(function(){

        var x=$("#change_password_form").validate({
            rules: {
            	oldPassword: {
                    required: true                    
                },
                newPassword: {
                    required: true,
                    minlength: 8,
                    maxlength: 50
                },
            confirmPassword: {
                    required: true,
                    minlength: 8,
                    equalTo: "#newPassword",
                    maxlength: 50
                }               
            },
           
            messages: {
                oldPassword: {
                    required: "Old Password Required"
                    
                },

                newPassword: {
                    required: "New Password Required",
                    minlength: "Your password must be at least 8 characters long"
                },
                confirmPassword: {
                    required: "Password Confirmation Required",
                    minlength: "Your password must be at least 8 characters long",
                    equalTo: "Please enter the same password as above"
                },
               
            }
        });
    });
   
   
    jQuery.validator.addMethod("lettersonly", function(value, element) {
        return this.optional(element) || /^[a-z]+$/i.test(value);
      }, "Letters only please");
   
    $.validator.addMethod("custom_number", function(value, element) {
        return this.optional(element) || value === "NA" ||
            value.match(/^[0-9,\+-]+$/);
    }, "Please enter a valid number, or 'NA'");
  </script>
